<template >
    <!-- 模态框 -->
  <div  id="logView"  v-if="showLog">
    <div class="modal show" aria-modal="true" style="display: block" >
      <div class="modal-dialog modal-lg modal-dialog-scrollable" >
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">【{{task?task.name:''}}】执行日志</h4>
            <button type="button" class="btn-close" @click="hideDialog"></button>
          </div>
          <!-- 模态框内容 -->
          <div class="modal-body text-start">
            <div class="block" v-if="task?true:false">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in task.logs"
                  :key="index"
                  :timestamp="log2TimeStamp(activity)"
                  placement="top"
                >
                  {{activity}}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" @click="hideDialog">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop show" ></div>
  </div>

</template>
<script>
export default{
  name:"showLog",
  data(){
    return {
      //显示隐藏控制
      showLog: false,
      task: null
    };
  },
  methods:{
    showDialog:function (id){
       this.getOne(id)
      this.showLog=true
    },
    hideDialog:function (){
      this.showLog=false
      //重置
      this.task=null
    },
    log2TimeStamp(str){
      if(str){
       let index=str.indexOf("】")
        if(index>4){
          return str.substring(1,index)
        }
      }
    },
    getOne(id){
      fetch("/quartz/getTaskById?id="+id).then(res=>res.json()).then(data=>{
        if(data==null||!data.status){
         this.task=data

        }else{
          alert(data.error)
        }
      })
    }
  }
};
</script>
